<script lang="ts">
    import mixin from "@/uni_modules/u-tools/mixin/mixin";
    import mpMixin from "@/uni_modules/u-tools/mixin/mpMixin";
    import props from "./props";

    export default {
        name: "u-icon",
        // 混入
        mixins: [props, mixin, mpMixin],
        // 事件
        emits: [
            "click"
        ],
        // 数据
        data()
        {
            return {
                colorType: ["default", "primary", "success", "info", "error", "warning"]
            };
        },
        // 计算属性
        computed: {
            // 图标样式
            iconStyle(): Record<string, any>
            {
                return {
                    fontSize: this.$u.unit(this.size),
                    lineHeight: this.$u.unit(this.size),
                    color: this.color && !this.colorType.includes(this.color) ? this.color : "",
                    fontWeight: this.bold ? "bold" : "normal"
                };
            }
        },
        // 方法
        methods: {
            // 点击事件
            clickHandler(event: Record<string, any>): void
            {
                this.$emit("click", {event});

                // 阻止冒泡
                this.stop && this.stopPropagation(event);

                // 阻止事件默认行为
                this.prevent && this.preventDefault(event);
            }
        }
    };
</script>

<template>
    <!-- 图标组件 -->
    <view
        :class="customClass"
        :style="customStyle"
        class="u-icon"
        @tap="clickHandler"
    >
        <!-- 内盒 -->
        <text
            :class="['icon', className, `${prefix}-${icon}`, color && colorType.includes(color) ? `u-icon-${color}` : '']"
            :style="[iconStyle]"
            class="u-icon-text"
        />
        <!-- //内盒 -->
    </view>
    <!-- //图标组件 -->
</template>

<style lang="scss" scoped>
    // 信息提示
    $u-icon-info-color: #333 !default;

    // 主要提示
    $u-icon-primary-color: $theme-primary !default;

    // 成功提示
    $u-icon-success-color: $theme-success !default;

    // 错误提示
    $u-icon-error-color: $theme-error !default;

    // 警告提示
    $u-icon-warning-color: $theme-warning !default;

    .u-icon
    {
        display: flex;
        align-items: center;
        justify-content: center;

        &-info
        {
            color: $u-icon-info-color;
        }

        &-primary
        {
            color: $u-icon-primary-color;
        }

        &-success
        {
            color: $u-icon-success-color;
        }

        &-error
        {
            color: $u-icon-error-color;
        }

        &-warning
        {
            color: $u-icon-warning-color;
        }
    }
</style>